<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3Router模拟</title>
</head>

<body>
    <div>vue3Router模拟</div>
    <div id="counter">
        <div>
            <ul>
                <li>
                    <router-link to="/home">home</router-link>
                </li>
                <li>
                    <router-link to="/about">about</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>

</body>
<script src="./vue3.js"></script>
<script>
    // https://github.com/whinc/blog/issues/13
    let sciterVue3Router = {
        install(app, options) {
            // 注册全局hash存储
            globalThis.__vue3_hash__ = ""
            // 注册router-view组件
            app.component("router-view", {
                data() {
                    return {
                        routeView: ""
                    }
                },
                template: `<template>
                        <component :is="routeView" />
                    </template>`,
                created() {
                    this.boundHashChange = this.onHashChange.bind(this)
                },
                beforeMount() {
                    document.addEventListener('hashchange', this.boundHashChange)
                },
                mounted() {
                    this.onHashChange()
                },
                beforeDestroy() {
                    document.removeEventListener('hashchange', this.boundHashChange)
                },
                methods: {
                    onHashChange() {
                        let path = globalThis.__vue3_hash__
                        this.routeView = this.$root.$routes[path] || null
                    }
                }
            })
            // router-link
            app.component("router-link", {
                props: {
                    to: String
                },
                template: `<template>
                        <a v-on:click="onClick" href=''><slot></slot></a>
                        </template>`,
                methods: {
                    onClick() {
                        // 声明全局hash
                        globalThis.__vue3_hash__ = this.to;
                        document.dispatchEvent(new CustomEvent("hashchange"))
                    }
                }
            })
        }
    }
    // 路由实现
    // 类似Vue.component("home",{})
    const routes = {
        '/home': {
            data(){
                return {
                    text:"Home Component"
                }
            },
            template: '<h2>{{text}}</h2>'
        },
        '/about': {
            data(){
                return {
                    text:"about Component"
                }
            },
            template: '<h2>{{text}}</h2>'
        }
    }
    const Counter = {
        data() {
            
        },
        beforeCreate() {
            // 注册页面路由
            this.$routes = routes
        }
    }

    let app = Vue.createApp(Counter)
    // 使用路由实现
    app.use(sciterVue3Router)
    app.mount('#counter')

</script>

</html>